<template>
	<view>
		<view class="center">
			<view class="center_top">
				<view class="">&nbsp; &nbsp; &nbsp;</view>
				<view class="center_top1">
					我的
				</view>
				<image src="/static/img/Fill .png" mode=""></image>
			</view>
			<view class="center_user" @tap="login" v-if="!user.uid">
				<image src="../../static/default.png" mode=""></image>
				<view class="center_user-text">
					<view class="center_user-text1">你的名字</view>
					<view class="center_user-text2">欢迎你回来哦~</view>
				</view>

			</view>

		</view>
		<view class="mydd">
			<view class="mydd1">
				<view class="mydd1-1">
					我的订单
				</view>
				<view class="mydd1-2" @click="mydd">
					<view class="mydd1-2text">
						查看全部
					</view>
					<image src="/static/img/youfh.png" mode=""></image>
				</view>
			</view>
			<view class="order">
				<view class="order_item">
					<view class="order_item_a" @click="goorder(0)">
						<image src="/static/img/mydd1.png" mode=""></image>
						<text>待付款</text>
					</view>
					<view class="order_item_a" @click="goorder(1)">
						<image src="/static/img/mydd2.png" mode=""></image>
						<text>待发货</text>
					</view>
					<view class="order_item_a" @click="goorder(2)">
						<image src="/static/img/mydd3.png" mode=""></image>
						<text>待收货</text>
					</view>
					<view class="order_item_a" @click="goorder(3)">
						<image src="/static/img/mydd4.png" mode=""></image>
						<text>待评价</text>
					</view>
				</view>

			</view>
		</view>
		<view class="qianbao">
			<view class="qianbao1">
				<view class="qianbao1-1" @click="qianbao">
					<view class="qianbao1-1text">我的钱包</view>
					<view class="qianbao1-1text1">
						钱包余额
						<image src="../../static/img/youfh.png" mode=""></image>
					</view>
				</view>
				<view class="qianbao1text">120.6元</view>
			</view>
			<view class="qianbao1">
				<view class="qianbao1-1" @click="shanghu">
					<view class="qianbao1-1text">商户中心</view>
					<view class="qianbao1-1text1">
						收入明细
						<image src="../../static/img/youfh.png" mode=""></image>
					</view>
				</view>
				<view class="qianbao1text1">提现</view>
			</view>
		</view>

		<view class="box">
			<view class="box1">
				<view class="box1-1">
					<image src="../../static/img/mytit1.png" mode=""></image>
					<view class="box1-1texte">我的分享</view>
				</view>
				<image src="../../static/img/youfh.png" mode=""></image>
			</view>
			<view class="box1">
				<view class="box1-1">
					<image src="../../static/img/mytit2.png" mode=""></image>
					<view class="box1-1texte">地址管理</view>
				</view>
				<image src="../../static/img/youfh.png" mode=""></image>
			</view>
			<view class="box1">
				<view class="box1-1">
					<image src="../../static/img/mytit3.png" mode=""></image>
					<view class="box1-1texte">客服中心</view>
				</view>
				<image src="../../static/img/youfh.png" mode=""></image>
			</view>
			<view class="box1" @click="yijian">
				<view class="box1-1">
					<image src="../../static/img/mytit4.png" mode=""></image>
					<view class="box1-1texte">意见反馈</view>
				</view>
				<image src="../../static/img/youfh.png" mode=""></image>
			</view>
			<view class="box1">
				<view class="box1-1">
					<image src="../../static/img/mytit5.png" mode=""></image>
					<view class="box1-1texte">设置</view>
				</view>
				<image src="../../static/img/youfh.png" mode=""></image>
			</view>
		</view>
		<!-- <view class="cate">
			<view class="cate_box">
				<view class="cate_box_item">
					<image src="../../static/rush1.png" mode=""></image>
					<text>我的买单</text>
				</view>
				<view class="cate_box_item">
					<image src="../../static/rush2.png" mode=""></image>
					<text>待付款</text>
				</view>
				<view class="cate_box_item">
					<image src="../../static/rush3.png" mode=""></image>
					<text>我的卖单</text>
				</view>
				<view class="cate_box_item">
					<image src="../../static/rush4.png" mode=""></image>
					<text></text>
				</view>
			</view>
		</view> -->







		<tabbar :selected="4"></tabbar>
		<uni-popup ref="popup">
			<image src="../../static/youshang.png" @click="closepop()" style="width: 100%;"></image>
		</uni-popup>

		<uni-popup ref="popup2">
			<view style="width: 220px;height: 220px;">
				<image :src="src.path" style="width: 100%;height: 100%;"></image>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	let jweixin = require('jweixin-module');
	export default {
		data() {
			return {
				user: {},
				src: {},
				sharedata: {}
			};
		},
		onShow() {
			uni.hideTabBar({
				animation: false
			})
			if (uni.getStorageSync('token')) this.getuser();
			this.getconfig();

		},
		methods: {
			yijian() {
				uni.navigateTo({
					url: '/pages/center/yijian'
				})
			},
			mydd() {
				uni.navigateTo({
					url: '/pages/center/mydingdan'
				})
			},
			chongzhi() {
				var that = this;
				this.$refs['popup2'].open('center')
				that.$http('center/getmyqrcode', {}, function(res) {
					that.src = res.data
				})

			},
			shanghu() {
				uni.navigateTo({
					url: '/pages/center/shanghucentre'
				})
			},
			qianbao() {
				uni.navigateTo({
					url: '/pages/center/myqianbao'
				})
			},
			goshare() {
				var token = uni.getStorageSync('token');
				if (!token) {
					this.login();
				} else {
					this.$refs.popup.open('top')
					//TODO:: 这里弹出提示框
				}
			},
			closepop() {
				this.$refs.popup.close();
			},
			login() {
				// this.$store.commit("showLogin")
				uni.navigateTo({
					url: '/pages/center/gereninfo'
				})
			},
			getconfig() {
				var that = this;
				that.$http('api/getwechatconfig', {
					url: location.href
				}, function(res) {
					if (res.code === 0) {
						jweixin.config({
							debug: false, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。
							appId: res.data.appId, // 必填，公众号的唯一标识
							timestamp: res.data.timestamp, // 必填，生成签名的时间戳
							nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
							signature: res.data.signature, // 必填，签名
							jsApiList: res.data.jsApiList // 必填，需要使用的 JS 接口列表
						});
						that.sharedata = res.data.sharedata;

						jweixin.ready(function() {
							var token = uni.getStorageSync('token');
							if (!token) {
								jweixin.hideAllNonBaseMenuItem();
							} else {
								jweixin.updateAppMessageShareData({
									title: that.sharedata.title, // 分享标题
									desc: that.sharedata.desc, // 分享描述
									link: that.sharedata
										.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
									imgUrl: that.sharedata.imgUrl, // 分享图标
									success: function(e) {
										// 设置成功
										console.log(e, 111)
									}
								})
								jweixin.updateTimelineShareData({
									title: that.sharedata.title, // 分享标题
									link: that.sharedata
										.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
									imgUrl: that.sharedata.imgUrl, // 分享图标
									success: function() {
										// 设置成功
									}
								})
							}
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'error'
						})
					}
				})
			},
			getuser() {
				var that = this;
				this.$http('center/getuser', {}, function(res) {
					if (res.code === 0) {
						that.user = res.data;
					} else {
						uni.showToast({
							title: res.mag,
							success() {
								window.location.reload()
							}
						})
						uni.setStorageSync('token', '');
					}
				})
			},
			gopaihang() {
				uni.navigateTo({
					url: '/pages/bangdan/bangdan'
				})
			},
			gourl(path) {
				if (!uni.getStorageSync('token')) {
					this.$store.commit('showLogin');
				} else {
					uni.navigateTo({
						url: path
					})
				}
			},
			goorder(status) {
				if (!uni.getStorageSync('token')) {
					this.$store.commit('showLogin');
				} else {
					uni.navigateTo({
						url: '/pages/order/list?status=' + status
					})
				}
			},
			goyue(type) {
				if (!uni.getStorageSync('token')) {
					this.$store.commit('showLogin');
				} else {
					uni.navigateTo({
						url: '/pages/wallet/wallet?type=' + type
					})
				}
			},
			gotuiguang() {
				if (!uni.getStorageSync('token')) {
					this.$store.commit('showLogin');
				} else {
					uni.navigateTo({
						url: '/pages/wallet/index'
					})
				}
			},
			logout() {
				uni.showModal({
					title: '退出提示',
					content: '确定要退出当前帐号“' + this.user.username + '”吗？',
					confirmText: '确定退出',
					success(e) {
						if (e.confirm) {
							uni.setStorageSync('token', '');
							uni.showToast({
								title: '退出成功',
								success() {
									location.reload()
								}
							})
						}

					}
				})
			},
			copy(txt) {
				uni.setClipboardData({
					data: txt,
					success: () => {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		min-height: 100%;

	}

	.center {
		width: 100%;
		height: 416rpx;
		background-image: url("/static/centerbg.png");
		background-size: cover;
		background-repeat: no-repeat;
		min-height: 100%;

		&_top {
			width: 90%;
			box-sizing: border-box;
			// padding-left: 40upx;
			margin: 0 auto;
			height: 90upx;
			color: #fff;
			font-size: 30upx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.center_top1 {
				font-size: 36rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #FFFFFF;
			}

			>image {
				width: 44rpx;
				height: 10rpx;
			}
		}

		&_user {
			display: flex;
			align-items: center;
			box-sizing: border-box;
			padding: 0 20upx;
			margin-top: 40upx;

			>image {
				width: 144rpx;
				height: 144rpx;
				border-radius: 50%;
				background: #ccc;
				margin-right: 24upx;
				overflow: hidden;
			}

			.center_user-text {
				.center_user-text1 {
					font-size: 36rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 48rpx;
				}

				.center_user-text2 {
					font-size: 28rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #FFFFFF;
					opacity: 0.7;
					line-height: 28rpx;
				}
			}

		}
	}

	.mydd {
		width: 90vw;
		margin: 0 auto;
		margin-top: -80rpx;
		background-color: white;
		border-radius: 20rpx;
		overflow: hidden;
	}

	.mydd1 {
		width: 80vw;
		margin: 0 auto;
		padding: 20rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.mydd1-1 {
			font-size: 28rpx;
			font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
			font-weight: normal;
			color: #373737;
			line-height: 38rpx;
		}

		.mydd1-2 {
			display: flex;
			align-items: center;

			.mydd1-2text {
				font-size: 24rpx;
				font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
				font-weight: normal;
				color: #999999;
				line-height: 38rpx;
			}

			>image {
				margin-left: 20rpx;
				width: 12rpx;
				height: 24rpx;

			}
		}
	}

	.order {
		width: 100%;
		margin: 0 auto;
		background-color: #fff;
		height: 180upx;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding: 0 10upx;

		&_item {
			flex: 4;
			display: flex;
			position: relative;

			&_a {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;

				>image {
					width: 46upx;
					height: 46upx;
				}

				>text {
					font-size: 26upx;
					font-weight: 500;
					color: #999;
					line-height: 24upx;
					margin-top: 20upx;
				}
			}

			.line {
				position: absolute;
				top: 50%;
				-webkit-transform: translateY(-50%);
				transform: translateY(-50%);
				right: -20upx;
				width: 30upx;
				height: 136upx;
				display: inline-block;
			}
		}

		&_all {
			flex: 1;
			display: flex;
			flex-direction: column;
			align-items: center;

			>image {
				width: 46upx;
				height: 46upx;
			}

			>text {
				font-size: 26upx;
				font-weight: 500;
				color: #999;
				line-height: 24upx;
				margin-top: 20upx;
			}
		}
	}

	.box {
		width: 90vw;
		margin: 20rpx auto;
		background-color: white;
		border-radius: 20rpx;

		.box1 {
			width: 80vw;
			margin: 0 auto;
			padding: 20rpx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;

			>image {
				width: 12rpx;
				height: 24rpx;
			}

			.box1-1 {
				display: flex;
				align-items: center;

				>image {
					width: 56rpx;
					height: 56rpx;
				}

				.box1-1texte {
					margin-left: 20rpx;
					font-size: 32rpx;
					font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
					font-weight: normal;
					color: #373737;
					line-height: 36rpx;
				}
			}

		}
	}

	.cate {
		width: 100%;
		background-color: #fff;
		height: 180upx;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding: 0 10upx;
		margin: 10upx 0;

		&_box {
			flex: 4;
			display: flex;

			&_item {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;

				>image {
					width: 46upx;
					height: 46upx;
				}

				>text {
					font-size: 26upx;
					font-weight: 500;
					color: #999;
					line-height: 24upx;
					margin-top: 20upx;
				}
			}
		}
	}

	.qianbao {
		display: flex;
		width: 90vw;
		margin: 20rpx auto;
		justify-content: space-between;

		.qianbao1 {
			display: flex;
			align-items: center;
			background-color: white;
			padding: 30rpx;
			border-radius: 20rpx;

			.qianbao1text {
				margin-left: 60rpx;
				font-size: 26rpx;
				font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
				font-weight: normal;
				color: #FF4140;
				line-height: 38rpx;
			}

			.qianbao1text1 {
				width: 102rpx;
				height: 52rpx;
				background: #FF4140;
				border-radius: 4px 4px 4px 4px;
				opacity: 1;
				margin-left: 60rpx;
				font-size: 22rpx;
				font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
				font-weight: normal;
				text-align: center;
				color: #FFFFFF;
				line-height: 52rpx;
			}

			.qianbao1-1 {
				.qianbao1-1text {
					font-size: 28rpx;
					font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
					font-weight: normal;
					color: #373737;
					line-height: 38rpx;
				}

				.qianbao1-1text1 {
					font-size: 24rpx;
					font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
					font-weight: normal;
					color: #999999;
					line-height: 38rpx;

					>image {
						margin-left: 10rpx;
						width: 12rpx;
						height: 20rpx;
					}
				}
			}
		}
	}
</style>
